<template>
    <div>
        <!-- Header头部Logo -->
        <Logo />
        <!-- 列表中有数据 -->
        <div class = "contend-yes" v-if = "infoData.length != ''">
            <p class = "addTo"><span  @click = "addTo()">添加</span></p>
            <el-table :data="infoData" style="width: 100%">
                <el-table-column align="center" type="index" width='100' label="序号"></el-table-column>
                <el-table-column align="center" prop="school_name" label="学校" ></el-table-column>
                <el-table-column align="center" prop="sale_id" label="销售人员" ></el-table-column>
                <el-table-column align="center" prop="createtime" label="创建日期"></el-table-column>
                <el-table-column align="center" prop="user_number" label="首账号"> </el-table-column>
                <el-table-column align="center" width="100" label="操作">
                    <template slot-scope="scope">
                        <a href="javascript:;" class="operation" @click="see(scope.row.school_name)">查看</a>
                        <a href="javascript:;" class="operation" @click="toUpdate(scope.row.school_name)">修改</a>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 表头 -->
            <!-- <ul class = "title-ul">
                <li style = "margin-left:43px;">序号</li>
                <li style = "margin-left:256px;">学校</li>
                <li style = "margin-left:142px;">销售人员</li>
                <li style = "margin-left:62px;">创建日期</li>
                <li style = "margin-left:177px;">系统</li>
                <li style = "margin-left:176px;">首账号</li>
                <li style = "margin-left:118px;">操作</li>
            </ul> -->
            <!-- 列表数据 -->
            <!-- <ul class = "list-ul">
                <li v-for = "(item,index) in infoData" :key = "index">
                    <span style = "width:40px;margin-left:40px;">{{ index + 1 }}</span>
                    <span style = "width:390px;margin-left:65px;" :title = "item.school_name">{{ item.school_name | ellipsis }}</span>
                    <span style = "width:80px;margin-left:48px;">{{ item.sale_id }}</span>
                    <span style = "width:120px;margin-left:29px;">{{ item.createtime }}</span>
                    <span style = "width:200px;margin-left:65px;">{{ item.system_id }}</span>
                    <span style = "width:130px;margin-left:50px;" :title = "item.user_number">{{ item.user_number | ellipsistow }}</span>
                    <span class = "operation" @click = "see(item.school_name)">查看</span>
                    <p class = "line"></p>
                </li>
            </ul> -->
            <div class="block">
                <!-- <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pager.pageNum"
                    :page-size="pager.pageSize"
                    :total="pager.total"
                    layout="total, prev, pager, next, jumper">
                </el-pagination> -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="resData.pageNum"
                    :page-size="resData.pageSize"
                    :total="resData.total"
                    layout="total, prev, pager, next, jumper">
                </el-pagination>
            </div>
        </div>
        <!-- 列表中没有数据 -->
        <div class = "contend-no" v-else>
            <!-- 图片 -->
            <img src = "../../assets/images/addTo.png" alt="">
            <!-- 文字描述 -->
            <p class = "describe">空空如也，点击下方按钮去补充吧</p>
            <!-- 添加按钮 -->
            <p class = "addTo" @click="addTo()" >添加</p>
        </div>
    </div>
</template>
<script>
import Logo from "../../components/Logo"
export default {
    components:{
        Logo
    },
    data () {
        return {
            //列表分页
            searchForm: {
                //当前页
                pageNum: 1
            },
            currentPage: 10,
            resData: [],


            infoData:[],
            schoolName:'',
            systemId:'',
        }
    },
    //靳春野过滤器filter，判断文字过长而显示省略号
    filters:{
        ellipsis(value){
            if (!value) return '';
            if (value.length > 10) {
                return value.slice(0,10) + '...'
            }
            return value
        },

        //限制工作岗位字节长度
        ellipsistow(value){
            if (!value) return '';
            if (value.length > 11) {
                return value.slice(0,11) + '...'
            }
            return value
        }
    },
    created () {
        this.initInfo()
    },
    methods:{
        // 翻页
        handleSizeChange(size) {
            this.pagesize = size;
        },
         //翻页
        handleCurrentChange(val) {
            this.searchForm.pageNum = val;
            this.initInfo();
        },
        // 添加
        addTo(){
            let self = this;
            let routeData = self.$router.resolve({
                path:'/fillIn',
                // query:{schoolName:schoolName}
            })
            window.open(routeData.href, '_blank')
            // self.$router.push({
            //     path: '/fillIn',
            //     // query: {
            //         // uuid: self.uuid
            //     // }
            // })
        },
        // 查看
        see(schoolName){
            let self = this
            self.$router.push({
                path:'/detailsPage',
                query:{schoolName:schoolName}
            })
        },
        //修改
        toUpdate(schoolName){
            let self = this
            self.$router.push({
                path:'/editPage',
                query:{schoolName:schoolName}
            })
        },
        //调用接口,查询群体信息
        initInfo(){
            let self = this
            self.$axios.get('/school/querySchoolInfo?schoolName=' +self.schoolName +'&systemId=' + self.systemId,{
                params: self.searchForm
            }).then(response => {
                let res = response.data
                if(res.code === 200){
                    self.infoData = res.data.content
                    self.resData = res.data
                    console.log(res.data,11111)
                }else{
                    self.$notify({
                        type: 'danger', message: res.message
                    })
                }
            })
        },
    }
}
</script>
<style lang = "scss" scoped>
    /* 列表中有数据 */
    .contend-yes{
        width: 1200px;
        position: relative;
        margin: 0 auto;
        .addTo{
            width: 1200px;
            height: 90px;
            position: relative;
            span{
                width: 120px;
                height: 40px;
                color: #fff;
                background: #387ee8;
                font-size: 16px;
                text-align: center;
                line-height: 40px;
                border-radius: 5px;
                position: absolute;
                right: 0;
                top: 25px;;
                display: block;
                cursor: pointer;
                &:hover{
                    background: #0e69f0;
                }
            }
        }
        .title-ul{
            width: 1200px;
            height: 60px;
            background: #eaeaea;
            li{
                text-shadow: 0 0 #000;
                font-size: 16px;
                color: #333333;
                float: left;
                line-height: 60px;
            }
        }
        .list-ul{
            width: 1200px;
            height: 540px;
            position: relative;
            li{
                width: 1200px;
                height: 60px;
                position: relative;
                line-height: 60px;
                color:#333333;
                span{
                    height: 60px;
                    text-align: center;
                    font-size:16px;
                    position: relative;
                    float: left;
                }
                .operation{
                    width:50px;
                    margin-left:68px;
                    color:#385899;
                    cursor: pointer;
                    &:hover{
                        color:#0e69f0;
                    }
                }
                .line{
                    width: 1200px;
                    height: 1px;
                    border-bottom: 1px solid #d6d6d6;
                    position: absolute;
                    bottom: 0;
                }
            }
        }
        .block{
            position: relative;
            margin-top: 30px;
            float: right;
        }
    }
    /* 列表中没有数据 */
    .contend-no{
        width: 240px;
        height: 266px;
        position: relative;
        margin: 0 auto;
        margin-top: 12%;
        img{
            width: 188px;
            height: 167px;
            position: relative;
            margin: 0 auto;
            display: block;
        }
        .describe{
            font-size: 16px;
            color: #a6a6a6;
            position: relative;
            margin-top: 8px;
            margin-bottom: 28px;
        }
        .addTo{
            width: 120px;
            height: 40px;
            color: #fff;
            background: #387ee8;
            font-size: 16px;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
            position: relative;
            margin: 0 auto;
            cursor: pointer;
            &:hover{
                background: #0e69f0;
            }
        }
    }
</style>
